<template>
  <div class="main-changePassword">
    <div class="pwdRow">
      <div class="pwdLabel">输入旧密码</div>
      <el-input size="mini" v-model="oldPwd" placeholder="输入新密码" show-password></el-input>
    </div>
    <div class="pwdRow">
      <div class="pwdLabel">输入新密码</div>
      <el-input size="mini" v-model="newPwd1" placeholder="输入新密码" show-password></el-input>
    </div>

    <div class="pwdRow">
      <div class="pwdLabel">确认新密码</div>
      <el-input size="mini" v-model="newPwd2" placeholder="输入新密码" show-password></el-input>
    </div>
    <div class="pwdRow" style="padding-left: 150px;margin-top: 30px">
      <el-button type="primary" size="mini" style="width: 100px" @click="handleSave">保存</el-button>
    </div>
  </div>
</template>

<script>
import {getCookies, changePassword, setCookies} from "@/assets/js/api";

export default {
  name: "changePassword",
  components: {},
  data() {
    return {
      oldPwd: '',
      newPwd1: '',
      newPwd2: ''
    };
  },
  mounted() {
    let dom = document.querySelector('.changePassword')
    dom.style.width = '500px'
    dom.style.height = '300px'
    dom.style.top = '100px'
    dom.style.left = 'calc(50% - 250px)'
    let dom2 = document.querySelector('.changePassword .panelContent')
    dom2.style.height = 'calc(100% - 70px)'
  },
  methods: {
    handleSave() {
      if (!this.oldPwd) {
        this.$message.warning('原始密码不能为空！')
        return
      }
      let oldPwd = getCookies().pwd
      if (this.oldPwd && this.oldPwd !== oldPwd) {
        this.$message.warning('原始密码错误！')
        return
      }
      if (!this.newPwd1 || !this.newPwd2) {
        this.$message.warning('新密码不能为空！')
        return
      }
      if (this.newPwd1 !== this.newPwd2) {
        this.$message.warning('两次输入密码必须相等！')
        return
      }
      let newPwd = this.newPwd1
      let {name} = getCookies()
      //   修改密码
      changePassword(name, newPwd).then(res => {
        if (res.code === 400) {
          //   修改缓存
          setCookies(name, newPwd)
          this.$message.success('修改密码成功')
          this.$emit('quit')
        } else {
          this.$message.error('修改密码失败')
        }
      })


    }
  },
  watch: {},
  computed: {},
  beforeDestroy() {

  },
}
</script>

<style scoped>
.main-changePassword {
  position: relative;
  height: 100%;
  width: 100%;
  padding-top: 30px;
}

</style>
<style>
.pwdRow {
  display: flex;
  padding-left: 20px;
  padding-bottom: 10px;
}

.pwdLabel {
  width: 100px;
  line-height: 28px;
}

.pwdRow input {
  width: 250px;
}
</style>
